<template>
  <div v-if= "showRui" class="history">
    <div v-if="isShow" id="hide" class="history-header">
      <p id="history-text">{{ $_t('search.history', '历史记录') }}</p>
      <div id="del" @click="clearStorage">
        <rt-icon name="rt-base-delete" size="14" color="#ccc"></rt-icon>
        <span style="color:#ccc;font-size: 14px;">清空</span>
      </div>
    </div>
    <div v-if="isShow" class="history-content">
      <p
        v-for="(item, index) in options"
        :key="index"
        @click="historyClick(item)"
      >
        {{ item }}
      </p>
    </div>
    <div>
      <p style="margin-top: 15px;" id="history-text">小瑞推荐</p>
      <rt-list :fetch="fetch">
        <div slot-scope="{ row }" class="account-item">
          <div class="account-name" @click="articleClick(row)">
            {{ row.name | conentFilter }}
          </div>
        </div>
      </rt-list>
    </div>
  </div>
</template>

<script>
export default {
  name: 'searchArticleHistory',
  filters: {
    conentFilter(value) {
      // 可以使用当前分辨率来进行切割数据，从而实现单行显示
      // len表示value可以占用最长的长度； count表示这一行最多可以有多少字； 12表示字体的大小font-size；这里的58是根据页面计算得来的，总长度-最多容纳字体长度
      let len = window.screen.width - 58;
      let count = parseInt(len / 12);     // parseInt()是省略小数部分的计算方式，这里需要取整
      // alert(len + "   " + count);
      if (!value) return '';
      if (value.length > count) {
        // 这一行数据超过了最大的显示数count，所以显示count-1之前的数据，之后的用...拼接
        return value.slice(0, (count - 1)) + '...';
      }
      return value;
    }
  },
  props: {
    options: Array,
    model: String
  },
  data() {
    return {
      showRui: true,
      isShow: false
    };
  },
  watch: {},
  // 查询本地缓存
  created() {
    var hisLength = 'article-history';
    var arr = localStorage.getItem(hisLength);
    if(arr == null || arr == undefined) {
        arr = [];
    }
    if (arr.length > 2) {
      this.isShow = true;
    }
  },
  mounted() {},
  methods: {
    // 小瑞推荐的十篇文章
    fetch(page) {
      return new Promise(resolve => {
        rt.get('/api/bbs/search/findTopTen')
          .then(res => {
            resolve(res);
          })
          .catch({});
      });
    },
    // 小瑞推荐点击 只在文章中显示
    articleClick(row) {
      this.$router.push({
            name: 'article-detail',
            query: { 
              id: row.bbs_articleid,
              name: row.name 
            }
          });
    },
    // 清理本地缓存
    clearStorage() {
      this.isShow = false;
      let _element = document.querySelector('.history');
      setTimeout(() => {
        this.options.splice(0, this.options.length);
        localStorage.setItem(
          'article-history',
          JSON.stringify(this.options)
        );
      }, 500);
    },
    // 点击本地缓存图标
    historyClick(queryValue) {
      this.$emit('click', queryValue);
    }
  }
};
</script>

<style lang="less" scoped>
.history {
  background: #fff;
  padding: 15px 11px;
  margin-top: 12px;
  height: 100%;
  position: relative;
  border-radius: 12px 12px 5px 5px;

  // 标题样式
  #history-text {
    font-size: 16px;
    color: #222;
    line-height: 1;
    font-weight: bold;
  }

  // 删除按钮的样式
  #del {
    position: absolute;
    right: 11px;
    top: 15px;
  }

  // 小瑞推荐文章的样式
  // 如果这里的字体大小需要修改，也要修改filters
  .account-item {
    // table-layout: fixed;
    display: table;
    background: #f7f8fa;
    font-size: 12px;
    padding: 5px 13px;
    margin: 2px 10px 10px 0;
    border-radius: 2px;
  }
}

.fade-out {
  animation: fadeOut 0.5s;
  -webkit-animation: fadeOut 0.5s;
  animation-fill-mode: forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

.history-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 10px;

  & > p {
    font-weight: 500;
    background: #f7f8fa;
    font-size: 12px;
    color: #222;
    padding: 5px 13px;
    border-radius: 14px;
    margin: 1px 10px 10px 0;
    border-radius: 2px;
  }

  .no-history {
    padding-top: 40%;
    text-align: center;
    margin: 0 52px;
    position: relative;
    height: 182px;

    img {
      width: 100%;
      height: 100%;
    }

    & > p {
      position: absolute;
      text-align: center;
      color: #b4bdcf;
      width: 100%;
      font-size: 13px;
      bottom: 50px;
      line-height: 1;
    }
  }
}
</style>
